﻿<Window x:Class="System.Windows.Elements.ColorDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:System.Windows.Elements"
    xmlns:art="clr-namespace:System.Windows.Art;assembly=System.Windows.Art"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="Color Picker" Name="colorDialog" Height="350" Width="510" ResizeMode="NoResize" WindowStartupLocation="CenterOwner" Icon="/System.Windows.Elements;component/Resources/NullHS.png">
    <Window.Resources>
        <local:ColorToBrushConverter x:Key="colorToBrush" />
        
        <ImageBrush x:Key="transparencyBackground" Stretch="None" TileMode="Tile" Viewport="0,0,16,16" ViewportUnits="Absolute" ImageSource="/System.Windows.Elements;component/Resources/TransparentHS.png" />
        
        <Style x:Key="slider" TargetType="{x:Type Polygon}">
            <Setter Property="Fill" Value="Gray" />
            <Setter Property="BitmapEffect">
                <Setter.Value>
                    <BevelBitmapEffect EdgeProfile="Linear" BevelWidth="5" Relief="0.2" Smoothness="0.3" />
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="numericBox" TargetType="{x:Type local:NumericBox}">
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="Width" Value="40" />
            <Setter Property="Height" Value="22" />
            <Setter Property="IsIntegerMode" Value="True" />
            <Setter Property="IsNullAllowed" Value="False" />
            <Setter Property="MinValue" Value="0" />
            <Setter Property="MaxValue" Value="255" />
            <EventSetter Event="Loaded" Handler="NumericBoxLoadedHandler" />
        </Style>

        <Style x:Key="channelSelector" TargetType="{x:Type ListBox}">
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="KeyboardNavigation.DirectionalNavigation" Value="Cycle" />
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="20" />
                                            <ColumnDefinition Width="20" />
                                            <ColumnDefinition />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Canvas Grid.ColumnSpan="3" Background="Transparent" />
                                        <RadioButton Grid.Column="0" GroupName="channels" Focusable="false" VerticalAlignment="Center" IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
                                        <StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
                                            <TextBlock Text="{Binding Channel.ShortName}" />
                                            <TextBlock Text=":" />
                                        </StackPanel>
                                        <ContentControl Grid.Column="2" Content="{Binding Child}" VerticalAlignment="Center" />
                                        <TextBlock Grid.Column="3" Text="{Binding Postfix}" VerticalAlignment="Center" Margin="5 0 5 0" />
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsSelected" Value="true">
                                            <Setter Property="Background" Value="Transparent" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <StackPanel />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="150" />
            <RowDefinition />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="220" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        
        <local:Palette Grid.RowSpan="2" Grid.Column="0" x:Name="palette" Width="210" Height="210" Margin="5 25 0 0" Cursor="{x:Static local:StaticHelper.ColorPickerCursor}" IsMarkerVisible="True" PickedColor="{Binding ElementName=colorPicker, Path=Color, Mode=TwoWay}" VerticalAlignment="Top" />

        <local:Palette Grid.RowSpan="3" Grid.Column="1" x:Name="colorBar" Width="30" Height="220" Margin="0 20 0 0" VerticalAlignment="Top" PickedColor="{Binding ElementName=colorPicker, Path=Color, Mode=TwoWay}" Background="{StaticResource transparencyBackground}">
            <local:Palette.LeftSlider><Polygon Points="0 0, 5 5, 0 10" Style="{StaticResource slider}" /></local:Palette.LeftSlider>
            <local:Palette.RightSlider><Polygon Points="5 0, 0 5, 5 10" Style="{StaticResource slider}" /></local:Palette.RightSlider>
        </local:Palette>
        
        <Grid Grid.Column="2" Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="18" />
                <RowDefinition Height="50" />
                <RowDefinition Height="50" />
                <RowDefinition Height="18" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Text="new" HorizontalAlignment="Center" />
            <Rectangle Grid.Row="1" Grid.RowSpan="2" Height="100" Fill="{StaticResource transparencyBackground}" />
            <Rectangle Grid.Row="1" Height="50" Fill="{Binding ElementName=colorPicker, Path=Color, Converter={StaticResource colorToBrush}}" />
            <Rectangle Grid.Row="2" Height="50" Fill="{Binding ElementName=colorDialog, Path=CurrentColor, Converter={StaticResource colorToBrush}, Mode=OneTime}" />
            <TextBlock Grid.Row="3" Text="current" HorizontalAlignment="Center" />
        </Grid>

        <StackPanel Grid.Column="3" Margin="5">
            <Button Content="OK" IsDefault="True" Margin="5" Click="OKButtonHandler" />
            <Button Content="Cancel" IsCancel="True" Margin="5" />
        </StackPanel>

        <local:ColorPicker x:Name="colorPicker" Grid.RowSpan="2" ColorChanged="ColorChangedHandler" />

        <ListBox Grid.Row="2" Margin="5 5 5 0" Style="{StaticResource channelSelector}" SelectedValue="{Binding ElementName=colorDialog, Path=ActiveChannel, Mode=TwoWay}" SelectedValuePath="Channel">
            <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.RgbAlpha}" NumericStyle="{StaticResource numericBox}" />
        </ListBox>
        
        <StackPanel Grid.Column="2" Grid.Row="1" Grid.ColumnSpan="2" Grid.RowSpan="2">
            <StackPanel Orientation="Horizontal">
                <ListBox Style="{StaticResource channelSelector}" SelectedValue="{Binding ElementName=colorDialog, Path=ActiveChannel, Mode=TwoWay}" SelectedValuePath="Channel">
                    <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.HsvHue}" Postfix="°" NumericStyle="{StaticResource numericBox}" MaxValue="360" />
                    <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.HsvSaturation}" Postfix="%" NumericStyle="{StaticResource numericBox}" MaxValue="100" />
                    <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.HsvValue}" Postfix="%" NumericStyle="{StaticResource numericBox}" MaxValue="100" />
                </ListBox>
                <ListBox Style="{StaticResource channelSelector}" SelectedValue="{Binding ElementName=colorDialog, Path=ActiveChannel, Mode=TwoWay}" SelectedValuePath="Channel" Margin="10 0 0 0">
                    <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.LabLightness}" NumericStyle="{StaticResource numericBox}" MaxValue="100" />
                    <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.LabA}" NumericStyle="{StaticResource numericBox}" MinValue="-128" MaxValue="127" />
                    <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.LabB}" NumericStyle="{StaticResource numericBox}" MinValue="-128" MaxValue="127" />
                </ListBox>
            </StackPanel>
            <ListBox Style="{StaticResource channelSelector}" SelectedValue="{Binding ElementName=colorDialog, Path=ActiveChannel, Mode=TwoWay}" SelectedValuePath="Channel" Margin="0 10 0 0">
            <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.RgbRed}" NumericStyle="{StaticResource numericBox}" />
                <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.RgbGreen}" NumericStyle="{StaticResource numericBox}" />
                <local:ListBoxChannelItem Channel="{x:Static local:StaticHelper.RgbBlue}" NumericStyle="{StaticResource numericBox}" />
            </ListBox>
        </StackPanel>
    </Grid>
</Window>
